<template>
  <div class="app-container">
    <el-card>
      <header>
        <div>
          <el-button type="primary" @click="handleAdd">
            <i class="el-icon-circle-plus-outline"></i>增加
          </el-button>
          <el-button type="danger" @click="handleDeleteAll">
            <i class="el-icon-delete"></i>删除
          </el-button>
        </div>
        <div class="flex mt-3">
          <el-select
            v-model="listQuery.cate_id"
            placeholder="请选择类别"
            style="width: 17%"
          >
            <el-option
              v-for="item in categoryOption"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="listQuery.style_id"
            placeholder="请选择风格标签"
            class="ml-4"
            style="width: 17%"
          >
            <el-option
              v-for="item in styleLabelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-input
            v-model="listQuery.days"
            class="ml-4"
            style="width: 17%"
            placeholder="请输入天数"
          ></el-input>
          <el-input
            v-model="listQuery.name"
            class="ml-4"
            style="width: 17%"
            placeholder="请输入商品名称"
          ></el-input>
        </div>
        <div class="flex mt-3">
          <el-select
            v-model="listQuery.status"
            placeholder="请选择出售状态"
            style="width: 17%"
          >
            <el-option label="上架" :value="1"></el-option>
            <el-option label="下架" :value="0"></el-option>
          </el-select>
          <el-date-picker
            class="ml-4"
            style="width: 17%"
            v-model="listQuery.add_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="添加日期"
          ></el-date-picker>
          <!-- <el-input
            v-model.number="listQuery.discount_rate"
            class="ml-4"
            style="width: 17%"
            placeholder="请输入折扣率(0-100之间)"
          ></el-input> -->
          <el-input
            v-model="listQuery.original_price"
            class="ml-4"
            style="width: 17%"
            placeholder="请输入原始价格"
          ></el-input>
          <div class="ml-4 flex items-center" style="width: 17%">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
          </div>
        </div>
      </header>
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        tooltip-effect="dark"
        ref="multipleTable"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="product_name" label="名称"></el-table-column>
        <el-table-column prop="cate_name" label="类别"></el-table-column>
        <el-table-column prop="style" label="风格标签"></el-table-column>
        <el-table-column label="原价">
          <template slot-scope="scope">
            <div style="display: flex; flex-direction: column">
              <span
                v-for="(item, index) in scope.row.product_price"
                :key="'价格' + index"
                >{{ item.day }}天：{{ item.original_price }}金币</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="discount_rate" label="折扣值"></el-table-column>
        <el-table-column prop="picture" label="展示图片">
          <template slot-scope="scope">
            <el-popover placement="top" max-width="420" trigger="hover">
              <img
                :src="scope.row.picture"
                alt=""
                style="max-width: 200px; max-height: 200px"
              />
              <img
                slot="reference"
                :src="scope.row.picture"
                alt=""
                style="width: 50px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="special" label="效果">
          <template slot-scope="{ row }">
            <el-popover
              v-if="/\.(png|jpg|gif|jpeg|webp)$/.test(row.special)"
              placement="top"
              max-width="420"
              trigger="hover"
            >
              <img
                :src="row.special"
                alt=""
                style="max-width: 200px; max-height: 200px"
              />
              <img
                slot="reference"
                :src="row.special"
                alt=""
                style="width: 50px"
              />
            </el-popover>
            <el-popover
              v-else-if="/\.mp4$/.test(row.special)"
              placement="top"
              max-width="420"
              trigger="hover"
            >
              <video
                :src="row.special"
                controls
                style="max-width: 200px; max-height: 200px"
              />
              <video
                slot="reference"
                autoplay
                :src="row.special"
                style="width: 50px"
              />
            </el-popover>
            <p v-else>{{ row.special }}</p>
          </template>
        </el-table-column>
        <el-table-column label="出售状态">
          <template slot-scope="{ row }">
            <el-tag v-if="row.status_name === '上架'" type="success"
              >上架</el-tag
            >
            <el-tag v-else type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="add_time" label="添加时间"></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="240">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              plain
              @click="handleEdit(scope.row)"
            >
              <i class="el-icon-edit-outline"></i>编辑
            </el-button>
            <el-button
              type="primary"
              size="small"
              plain
              @click="handleSend(scope.row)"
            >
              <i class="el-icon-present"></i>赠送
            </el-button>
            <el-button
              type="danger"
              size="small"
              plain
              @click="handleDelete(scope.row)"
            >
              <i class="el-icon-delete"></i>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <cus-pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="handleGetData"
      />
    </el-card>

    <!-- 删除弹框 -->
    <el-dialog
      title="确定删除吗?"
      :visible.sync="deleteDialogVisible"
      width="435px"
    >
      <span style=""
        ><em style="font-style: normal; color: red">删除后不可恢复</em
        >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmDel">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 赠送 -->
    <SendDialog
      :sendDialogVisible.sync="sendDialogVisible"
      :sendForm="rowData"
      @sendForm="handleConfirmSend($event)"
    ></SendDialog>

    <!-- 添加编辑 -->
    <addEditModal
      :dialogVisible.sync="addDialogVisible"
      :status.sync="status"
      :categoryOption="addCategoryOption"
      :styleLabelOptions="addStyleLabelOption"
      :id="rowData.id"
      @updateTable="handleSearch"
    ></addEditModal>
  </div>
</template>

<script>
import {
  getData,
  getStyleData,
  getCateData,
  deleteData,
  postSendData
} from "@/api/personalizedMall/discount";

import SendDialog from "../sendComponent/SendDialog";
import addEditModal from "./childComps/addEditModal/addEditModal";

export default {
  components: {
    SendDialog,
    addEditModal
  },
  data() {
    return {
      listQuery: {
        cate_id: 0,
        style_id: 0,
        days: undefined,
        name: undefined,
        status: undefined,
        add_date: undefined,
        discount_rate: undefined,
        original_price: undefined,
        page: 1,
        page_size: 10
      },
      categoryOption: [{ id: 0, title: "所有分类" }],
      styleLabelOptions: [{ id: 0, name: "所有风格标签" }],
      multipleSelection: [],
      total: 0,
      tableData: [],
      deleteDialogVisible: false,

      sendDialogVisible: false,
      rowData: {},

      addCategoryOption: [],
      addStyleLabelOption: [],
      addDialogVisible: false,
      status: "Add"
    };
  },
  created() {
    this.handleGetData();
    this.handleGetStyleData();
    this.handleGetCateData();
  },
  methods: {
    handleGetData() {
      getData(this.listQuery).then(res => {
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    handleGetStyleData() {
      getStyleData().then(res => {
        this.styleLabelOptions = [...this.styleLabelOptions, ...res.data];
        this.addStyleLabelOption = res.data;
      });
    },
    handleGetCateData() {
      getCateData().then(res => {
        this.categoryOption = [...this.categoryOption, ...res.data];
        this.addCategoryOption = res.data;
      });
    },
    handleSearch() {
      this.listQuery.page = 1;
      this.handleGetData();
    },
    handleReset() {
      this.listQuery = {
        cate_id: 0,
        style_id: 0,
        days: undefined,
        name: undefined,
        status: undefined,
        add_date: undefined,
        discount_rate: undefined,
        original_price: undefined,
        page: 1,
        page_size: 10
      };
      this.handleGetData();
    },

    // 添加
    handleAdd() {
      this.rowData = {};
      this.status = "Add";
      this.addDialogVisible = true;
    },

    // 编辑
    handleEdit(row) {
      this.rowData = row;
      this.status = "Edit";
      this.addDialogVisible = true;
    },

    // 赠送
    handleSend(row) {
      this.rowData = row;
      this.sendDialogVisible = true;
    },
    handleConfirmSend(value) {
      postSendData(value).then(res => {
        if (res.code === 200) {
          this.handleGetData();
          this.sendDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    },

    // 单个删除
    handleDelete(row) {
      this.del_ids = row.id.toString();
      this.deleteDialogVisible = true;
    },
    // 一键删除
    handleDeleteAll() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请勾选要删除的数据");
        return;
      } else {
        let arr = [];
        this.multipleSelection.forEach(item => {
          arr.push(item.id);
        });
        this.del_ids = arr.join(",");
      }
      this.deleteDialogVisible = true;
    },
    // 确认删除
    handleConfirmDel() {
      deleteData(this.del_ids).then(res => {
        if (res.code === 200) {
          this.handleGetData();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style></style>
